<template>
  <Layout showBack navColor="#fff" bg-color="#fff">
    <canvas v-if="displayCanvas" id="canvas" ref="canvas" type="2d" canvas-id="canvas" />
    <view class="result-dialog">
      <view class="result-main">
        <!-- 结果 -->

        <view v-if="pageType === 'success'" class="result-container">
          <image class="result-logo" :src="product.imageUrl" mode="aspectFit" />

          <view style="margin: 110rpx 0; font-weight: bold; font-size: 48rpx; color: #19be6b; letter-spacing: 8rpx">
            唯一正品标签
          </view>
          <view class="result-view">
            <view class="result-view-item">
              <view class="result-view-label">品牌名称：</view>
              <view class="result-view-value">{{ product.brandTitle }}</view>
            </view>
            <view class="result-view-item">
              <view class="result-view-label">产品名称：</view>
              <view class="result-view-value">{{ product.productTitle }}</view>
            </view>
            <view class="result-view-item">
              <view class="result-view-label">生产日期：</view>
              <view class="result-view-value">{{ product.insertDate }}</view>
            </view>
            <view class="result-view-item">
              <view class="result-view-label">产品标识码：</view>
              <view class="result-view-value">{{ product.productId }}</view>
            </view>
          </view>
          <view class="result-button">
            <u-button type="primary" text="关闭" @click="handleNextCheck"></u-button>
          </view>
        </view>

        <view v-else-if="pageType === 'register'" class="result-container">
         <image class="result-logo" :src="product.imageUrl" mode="aspectFit" />
         
         <view style="margin: 110rpx 0; font-weight: bold; font-size: 48rpx; color: #19be6b; letter-spacing: 8rpx">
           正品标签注册成功
         </view>
         <view class="result-view">
           <view class="result-view-item">
             <view class="result-view-label">品牌名称：</view>
             <view class="result-view-value">{{ product.brandTitle }}</view>
           </view>
           <view class="result-view-item">
             <view class="result-view-label">产品名称：</view>
             <view class="result-view-value">{{ product.productTitle }}</view>
           </view>
           <view class="result-view-item">
             <view class="result-view-label">生产日期：</view>
             <view class="result-view-value">{{ product.insertDate }}</view>
           </view>
           <view class="result-view-item">
             <view class="result-view-label">产品标识码：</view>
             <view class="result-view-value">{{ product.productId }}</view>
           </view>
         </view>
         <view class="result-button">
           <u-button type="primary" text="关闭" @click="handleNextCheck"></u-button>
         </view>
        </view>

        <view v-else class="result-error">
          <view style="margin: 110rpx 0; font-weight: bold; font-size: 48rpx; letter-spacing: 8rpx; color: #fa3534">
            疑似非法标签</view
          >
          <view style="font-size: 32rpx; line-height: 56rpx; color: #606266">
            该标签鉴定为伪造标签。但也可能是因您的检测环境不恰当引起，请您在光线充足且尽量不反光的条件下重新检测。或者更换设备重新检测</view
          >
          <view
            style="
              font-size: 32rpx;
              line-height: 56rpx;
              color: #f1a532;
              text-decoration: underline;
              text-underline-offset: 2px;
              text-decoration-style: dotted;
            "
          >
            若多次检测仍出现该界面，请您警惕该产品为非法产品</view
          >
          <view class="result-button">
            <u-button type="primary" text="重新检测" @click="handleNextCheck"></u-button>
          </view>
        </view>
      </view>
    </view>
  </Layout>
</template>

<script>
import { ConfettiEjector, CanvasRender, CustomShape, Confetti } from 'confetti-ts-canvas'

const canvasRender = new CanvasRender()
export default {
  name: 'result',
  components: {},
  data() {
    return {
      displayCanvas: true,
      canvasSize: {
        width: 0,
        height: 0
      },
      canvas: null,
      product: {
        brandTitle: null,
        productTitle: null,
        productId: null,
        insertDate: null,
        imageUrl: null
      },
      pageType: 'error'
    }
  },
  onLoad(options) {
    this.pageType = options.type || 'error'
    Object.assign(this.product, {
      brandTitle: (options.brandTitle && decodeURIComponent(options.brandTitle)) || null,
      productTitle: (options.productTitle && decodeURIComponent(options.productTitle)) || null,
      productId: (options.productId && decodeURIComponent(options.productId)) || null,
      insertDate: (options.insertDate && decodeURIComponent(options.insertDate)) || null,
      imageUrl: (options.imageUrl && decodeURIComponent(options.imageUrl)) || null
      // brandTitle: '五粮液',
      // imageUrl: 'http://116.63.177.90/downloads/cat.jpg',
      // insertDate: '2025-01-10 17:25:01',
      // productId: 'https://example.com',
      // productTitle: '五粮春'
    })

    console.log('params:', options)
  },
  async mounted() {
    if (this.pageType == 'success') {
      await this.initRenders()

      await this.handleTriggerFlower()
    }
  },
  methods: {
    async initRenders() {
      const painter = await this.getPainter()
      const rect = await this.getCanvasSize()
      const g = uni.createCanvasContext('canvas')
      const { width, height } = rect
      this.canvasSize.width = width
      this.canvasSize.height = height
      canvasRender.init(
        painter,
        {
          width: rect.width,
          height: rect.height
        },
        {
          onFinished() {
            console.log('完成')
          },
          displayFps: false,
          grivaty: 0.5
        }
      )
    },
    getCanvasSize() {
      return new Promise((r, e) => {
        uni
          .createSelectorQuery()
          .select('#canvas')
          .boundingClientRect((_) => {
            r(_)
          })
          .exec()
      })
    },
    getPainter() {
      return new Promise(async (r) => {
        const query = uni.createSelectorQuery()
        query
          .select('#canvas')
          .fields({
            node: true,
            size: true
          })
          .exec(async (res) => {
            //r(uni.createCanvasContext('myCanvas', this));
            const canvas = res[0].node
            if (canvas) r(canvas.getContext('2d'))
            if (canvas?.width || canvas?.height) {
              const dpr = (await uni.getSystemInfo())[1].pixelRatio
              canvas.width = res[0].width // * dpr;
              canvas.height = res[0].height // * dpr;
            }
            this.canvas = canvas
            r(uni.createCanvasContext('canvas', this))
          })
      })
    },
    async handleTriggerFlower() {
      const painter = await this.getPainter()
      const rect = await this.getCanvasSize()
      console.log('painter', painter, rect)
      const { width, height } = rect
      this.canvasSize.width = width
      this.canvasSize.height = height
      //极简new了直接用，一次性使用。
      //动画结束就销毁渲染对象，不用再为哪里创建对象而发愁
      new Confetti({
        paint: painter,
        canvasWidth: rect.width,
        canvasHeight: rect.height,
        displayFps: false
      }).run({
        // x:Math.random()*rect.width,
        // y:Math.random()*rect.height,
      })
    },
    handleNextCheck() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
#canvas {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0px;
  left: 0px;
  pointer-events: none;
  z-index: 999999;
}

.result-dialog {
  width: 100%;
  height: 100%;
  padding: 10% 10% 0;

  .result-main {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .result-error {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60rpx;
    text-align: center;
  }

  .result-logo {
    width: 250rpx;
    height: 250rpx;
    border-radius: 24rpx;
    border: 1px solid #e5e7eb;
  }

  .result-container {
    padding: 0 5% 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .result-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60rpx;

    .result-view-item {
      width: 100%;
      display: flex;
      align-items: center;
    }

    .result-view-label {
      padding-right: 40rpx;
      width: 225rpx;
      text-align: left;
      font-weight: bold;
      font-size: 32rpx;
    }

    .result-view-value {
      flex: 1;
      color: #666;
      text-align: right;
    }
  }

  .result-button {
    position: absolute;
    bottom: 10%;
    width: 100%;
  }
}
</style>
